body {
  background: #ccc
}
/*开场动画css*/
.title {
  color: white;
  /*转换不同元素文本：取值有：lowercase/uppercase/capitalize*/
  text-transform: uppercase;
  margin-top: 50px;
  text-align: center;
  font-size: 6rem;
  line-height: 1;
  animation: letterspacing 1s 7 alternate ease-in-out;
  letter-spacing: .5rem
}
@keyframes letterspacing {
  0% {
    letter-spacing: -72px;
    filter: blur(20px);
    /*设置背景的高斯模糊 默认值为0*/
  }
  40% {
    filter: blur(6px);
  }
  80% {
    letter-spacing: 8px
    filter: blur(0);
  }
}
  /*导航滑块css*/
  .nav {
    margin: 40px;
    position: relative;

  }
  .nav ul {
      list-style: none;
  }
  .nav li {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: #09f;
    cursor: pointer;
  }
  .nav span{
    position: relative;
    z-index: 2;
  }
  .nav .slider {
    position: absolute;
    transition:all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
    width: 100px;
    height: 40px;
    background: #f90;
    top: 0;
    left: 39px;
    z-index: 1;
  }
